/**
 * 厦门大学计算机专业 | 前华为工程师
 * 专注《零基础学编程系列》  http://lblbc.cn/blog
 * 包含：Java | 安卓 | 前端 | Flutter | iOS | 小程序 | 鸿蒙
 * 公众号：蓝不蓝编程
 */
<template>
  <div class="page-wrapper">
    <div class="header-search">
      <span class="title-text">蓝不蓝商城</span>
      <i class="iconfont icon-search"></i>
      <router-link tag="span" class="search_row" to="./search?from=home">点击搜索</router-link>
    </div>
    <van-tabs @click="onChangeTab" :color="'#EF3965'" :title-active-color="'#EF3965'" class="tab-row" v-model="status" >
      <van-tab v-for="(item, index) in categoryList" :key="index" :title="item.name" :name="item.id"></van-tab>
    </van-tabs>
    <div class="content">
      <van-list v-model:loading="loading" :finished="finished" @load="onLoad" @offset="10">
        <div v-for="(goods, index) in list" :key="index" class="goods-row" @click="goToDetail(goods.id)">
          <van-card :key="goods.id" :price="(goods.price/100).toFixed(2)" :title="goods.name" :thumb="goods.squarePic"/>
        </div>
      </van-list>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import navBar from '@/components/BottomNav'
import { queryCategory, queryGoodsByCategory } from '@/service/axios-services'
import { useRouter } from 'vue-router'

export default {
  name: 'Home',
  components: {
    navBar
  },
  setup() {
    const router = useRouter()
    const state = reactive({
      status: '1',
      loading: false,
      finished: false,
      refreshing: false,
      list: [],
      categoryList: [],
      page: 1,
      totalPage: 0
    })

    const loadData = async () => {
      loadCategory()
      loadGoods()
    }

    const loadCategory = async () => {
      const { data } = await queryCategory()
      state.categoryList = data
    }

    const loadGoods = async () => {
      const { data } = await queryGoodsByCategory(state.status)
      state.list = data
      state.loading = false
      state.finished = true
    }
    const onChangeTab = (name) => {
      state.status = name
      onRefresh()
    }

    const goToDetail = (id) => {
      router.push({ path: `/goods/${id}` })
    }

    const goBack = () => {
      router.go(-1)
    }

    const onLoad = () => {
      if (!state.refreshing && state.page < state.totalPage) {
        state.page = state.page + 1
      }
      if (state.refreshing) {
        state.list = []
        state.refreshing = false
      }
      loadData()
    }

    const onRefresh = () => {
      state.refreshing = true
      state.finished = false
      state.loading = true
      state.page = 1
      onLoad()
    }

    return {
      ...toRefs(state),
      onChangeTab,
      goToDetail,
      goBack,
      onLoad,
      onRefresh
    }
  }
}
</script>

<style lang="less" scoped>
.page-wrapper {
  background-color: #fff;
}
.tab-row {
  position: fixed;
  left: 0;
  z-index: 999;
  width: 100%;
  border-bottom: 1px solid #e9e9e9;
}
.header-search {
  display: flex;
  width: 74%;
  height: 20px;
  line-height: 20px;
  margin: 10px 0;
  padding: 5px 0;
  color: #232326;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 20px;
}
.title-text {
  padding: 0 10px;
  color: #EF3965;
  font-size: 20px;
  font-weight: bold;
  border-right: 1px solid #f4f4f4;
}
.icon-search {
  padding: 0 10px;
  font-size: 17px;
}
.search_row {
  font-size: 12px;
  color: #666;
  line-height: 21px;
}
.content {
  height: calc(~'(100vh - 140px)');
  overflow: hidden;
  overflow-y: scroll;
  margin-top: 50px;
}
.goods-row {
  margin: 20px 10px;
}
.van-card {
  background-color: white;
}
</style>
